<template>
  <view class="allClass">
    <view class="hrader">
      <image
        src="../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      {{ title }}
    </view>
    <view class="content">
      <view class="serach">
        <view class="inputS">
          <image
            class="sous"
            src="https://www.123qifu.com/onlineimages/static/Shopping/sous.png"
          />
          <input type="text" v-model="keyword" placeholder="请输入关键字搜索" />
          <view class="serbtn" @click="goodsIndex">搜索</view>
        </view>
      </view>
      <view class="lists">
        <view
          class="item"
          @click="jump(item.id)"
          v-for="(item, i) in list"
          :key="i"
        >
          <image class="itemImg" :src="item.main_image" mode="" />
          <view class="des">{{ item.name }}</view>
          <view class="price"
            >￥{{ item.price }}
            <view class="or_price">￥{{ item.original_price }}</view></view
          >
        </view>
      </view>
      <view class="nodata" v-if="list.length == 0">
        <image
          class="nolt"
          src="https://www.123qifu.com/onlineimages/static/nolt.png"
          mode=""
        />
        <text>没有搜索到相关内容~</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      title: "",
      keyword: "",
      page: 1, // 页码
      pageSize: 10, // 每页条数
      list: [],
    };
  },
  onShow() {
    if (this.id) {
      this.getGoodsByCategory();
    }
  },
  onLoad(e) {
    this.id = e.id;
    this.title = uni.getStorageSync("shopName");
  },
  onReachBottom() {
    if (this.total / 10 <= this.last_page && this.total > 10) {
      this.loadMore();
    }
  },
  methods: {
    gobackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 路由跳转
    pushPath(item) {
      uni.navigateTo({
        url: item,
      });
    },
    // 获取搜索商品列表
    async goodsIndex() {
      this.page = 1;
      const res = await this.$myRequest({
        url: "goods/index",
        method: "POST",
        data: {
          page: this.page, // 页码
          pageSize: this.pageSize, // 每页条数
          keyword: this.keyword,
        },
      });
      this.list = res.data.data.data;
    },
    // 获取商品列表
    async getGoodsByCategory() {
      this.page = 1;
      const res = await this.$myRequest({
        url: "goods/getGoodsByCategory",
        method: "POST",
        data: {
          category_id: this.id,
          page: this.page, // 页码
          pageSize: this.pageSize, // 每页条数
        },
      });
      this.list = res.data.data.data;
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    // 获取商品下一页列表
    async loadMore() {
      const res = await this.$myRequest({
        url: "goods/getGoodsByCategory",
        method: "POST",
        data: {
          category_id: this.id,
          page: (this.page += 1), // 页码
          pageSize: this.pageSize, // 每页条数
          keyword: this.keyword,
        },
      });
      this.list = this.list.concat(res.data.data.data);
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    // 查看商品详情
    jump(i) {
      uni.navigateTo({
        url: "../Shopping/prodetails?id=" + i,
      });
    },
  },
  watch: {
    keyword: {
      immediate: true,
      handler: function (newVal, oldVal) {
        if (newVal === "" && this.id) {
          //如果为空，执行方法获取list
          this.getGoodsByCategory();
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.nodata {
  .nolt {
    display: block;
    width: 348rpx;
    height: 190rpx;
    margin: 200rpx auto 0;
  }
  text {
    display: block;
    text-align: center;
    font-size: 30rpx;
    font-weight: 400;
    color: #999999;
    margin-top: 24rpx;
  }
}
.allClass {
  background-color: #f4f4f4;
  .content {
    min-height: calc(100vh);
    box-sizing: border-box;
    overflow: hidden;
  }
  .serach {
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .inputS {
      width: 714rpx;
      height: 64rpx;
      background: #f4f4f4;
      border-radius: 40rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding-left: 70rpx;
      margin: 10rpx auto 26rpx;
      .sous {
        position: absolute;
        width: 32rpx;
        height: 32rpx;
        left: 20rpx;
      }
      input {
        width: 60%;
        background: none;
        border: none;
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
      }
      .serbtn {
        width: 120rpx;
        height: 85%;
        text-align: center;
        font-size: 26rpx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 40rpx;
        background: #c52b2e;
      }
    }
    .userImg {
      display: block;
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
    }
  }
}
.lists {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 10rpx;
  .item {
    width: 350rpx;
    height: 480rpx;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 10rpx;
    overflow: hidden;
    margin-bottom: 15rpx;
    .itemImg {
      display: block;
      width: 100%;
      height: 360rpx;
    }
    .des {
      width: 100%;
      box-sizing: border-box;
      padding: 10rpx 10rpx 0;
      font-size: 26rpx;
      color: #444444;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .price {
      display: flex;
      align-items: flex-end;
      width: 100%;
      box-sizing: border-box;
      padding: 10rpx 10rpx 0;
      color: #c52b2e;
      font-size: 26rpx;
      font-weight: bold;
      .or_price {
        font-size: 22rpx;
        font-weight: 400;
        text-decoration: line-through;
        color: #999999;
        margin-left: 15rpx;
      }
    }
  }
}
</style>
